<script lang="ts" setup>
  import { reactive, ref, watch } from "vue"
  import { getList,deleteById } from "@/api/menu"
  import { type FormInstance, ElMessage, ElMessageBox } from "element-plus"
  import { usePagination } from "@/hooks/usePagination"
  import { cloneDeep } from "lodash-es"
  import handle from './components/handle.vue'
  import * as ElementPlusIconsVue from '@element-plus/icons-vue';

  const loading = ref<boolean>(false)
  const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
  const dialogVisible = ref<boolean>(false)
  const activeRow = ref<any>()
  const tableData = ref<any>([])
  const searchFormRef = ref<FormInstance | null>(null)
  const searchData = reactive({
    name: "",
  })

  const getTableData = () => {
    loading.value = true
    paginationData.pageSize = 200
    getList({
      ...paginationData,
      ...searchData
    }).then((res: any) => {
      paginationData.total = res.totalCount
      tableData.value = res.data
    }).catch(() => {
      tableData.value = []
    }).finally(() => {
      loading.value = false
    })
  }

  //关闭操作框
  const closeHandle = () => {
    dialogVisible.value = false
  }

  //操作完成
  const successHandle = () => {
    dialogVisible.value = false
    handleSearch()
  }

  //删除
  const handleDelete = (row: instance.menuRowFormInstance) => {
    ElMessageBox.confirm(`正在删除菜单：${row.name}，确认删除？`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      deleteById({ids:[row.menuId]}).then(() => {
        ElMessage.success("删除成功")
        getTableData()
      })
    })
  }

  //更新操作按钮
  const handleUpdate = (row: instance.menuRowFormInstance) => {
    activeRow.value = cloneDeep(row)
    dialogVisible.value = true
  }

  //新增操作按钮
  const handleAdd = () => {
    activeRow.value = {}
    dialogVisible.value = true
  }

  //搜索操作
  const handleSearch = () => {
    paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
  }

  //重置搜索表单
  const resetSearch = () => {
    searchFormRef.value?.resetFields()
    handleSearch()
  }
  watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <div class="title-wrapper">菜单管理</div>
    <div class="page-main">
      <div  shadow="never" class="search-wrapper" v-permission="['menu-search']">
        <div class="search-main">
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="name" label="名称">
              <el-input v-model="searchData.name" placeholder="请输入菜单名称" clearable />
            </el-form-item>
          </el-form>
        </div>
        <div class="search-btn">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
      </div>

      <div class="toolbar-wrapper">
        <!-- -->
          <el-button type="primary" v-permission="['menu-add']" @click="handleAdd">新增</el-button>
      </div>
      <div v-loading="loading"  class="table-wrapper">
        <el-table :data="tableData" >
          <el-table-column sortable prop="name" label="名称"  />
          <el-table-column sortable prop="icon" label="图标" >
            <template #default="scope">
              <template v-if="scope.row.icon">
                <component width="16" :is="scope.row.icon" />
                {{scope.row.icon}}
              </template>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="status" label="类型" >
            <template #default="scope">
              <el-tag v-if="scope.row.type == 1" type="success">目录</el-tag>
              <el-tag v-if="scope.row.type == 2" type="primary">菜单</el-tag>
              <el-tag v-if="scope.row.type == 3" type="info">按钮</el-tag>
            </template>
          </el-table-column>
          <el-table-column sortable prop="sort" label="排序"  >
            <template #default="scope">
              {{scope.row.sort || '-'}}
            </template>
          </el-table-column>
          <el-table-column sortable prop="code" label="编码"  ></el-table-column>
          <el-table-column sortable prop="url" label="URL/标识"  >
            <template #default="scope">
              {{scope.row.url || '-'}}
            </template>
          </el-table-column>
          <el-table-column sortable prop="parentName" label="父级"  >
            <template #default="scope">
              {{scope.row.parentName || '-'}}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150" >
            <template #default="scope">
              <el-button type="primary" v-permission="['menu-edit']" text size="small" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="danger" v-permission="['menu-del']" text size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

  <handle
    v-if="dialogVisible"
    :data="activeRow"
    @success="successHandle"
    @cancel="closeHandle"
    />
</template>

<style lang="scss" scoped>

</style>
